<!-- 历史订单 -->
<template>
  <!-- 模板部分保持不变 -->
  <div class="order-container">
    <h1>我的订单</h1>
    
    <div v-if="loading" class="loading">加载中...</div>
    
    <div v-else>
      <div v-if="orders.length === 0" class="no-orders">
        暂无订单数据
      </div>
      
      <div v-else class="order-list">
        <div v-for="order in sortedOrders" :key="order.id" class="order-item">
          <div class="order-header">
            <span class="order-id">订单号: {{ order.id }}</span>
            <span class="order-status" :class="getStatusClass(order.status)">
              {{ order.status }}
            </span>
          </div>
          
          <div class="order-body">
            <div class="product-info">
              <image
                :src="order.imageUrl"
              style="width: 200px;height: 200px;"/>
              <span class="product-name">{{ order.productName }}</span>
              <span class="product-quantity">x{{ order.quantity }}</span>
            </div>
            
            <div class="order-price">
              ￥{{ order.totalPrice.toFixed(2) }}
            </div>
          </div>
          
          <div class="order-footer">
            <span class="order-time">{{ formatDate(order.orderTime) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      orders: []
    }
  },
  computed: {
    // 添加计算属性来返回排序后的订单
    sortedOrders() {
      return [...this.orders].sort((a, b) => {
        return new Date(b.orderTime) - new Date(a.orderTime);
      });
    }
  },
  async created() {
    await this.fetchOrders();
  },
  methods: {
    async fetchOrders() {
      try {
        // 使用json-server API获取订单数据
        const response = await fetch('http://localhost:3000/orders');
        if (!response.ok) {
          throw new Error('获取订单数据失败');
        }
        this.orders = await response.json();
      } catch (error) {
        console.error('获取订单数据出错:', error);
        // 可以在这里添加错误处理，比如显示错误提示
      } finally {
        this.loading = false;
      }
    },
    
    formatDate(dateString) {
      if (!dateString) return '';
      const date = new Date(dateString);
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
    },
    
    getStatusClass(status) {
      return {
        'completed': status === '已完成',
        'pending': status !== '已完成'
      };
    }
  }
}
</script>

<style scoped>
/* 样式部分保持不变 */
.order-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.loading, .no-orders {
  text-align: center;
  padding: 50px;
  color: #666;
  font-size: 18px;
}

.order-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.order-item {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 15px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f5f5f5;
}

.order-id {
  font-size: 14px;
  color: #999;
}

.order-status {
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 4px;
}

.order-status.completed {
  background-color: #f0f9eb;
  color: #67c23a;
}

.order-status.pending {
  background-color: #fdf6ec;
  color: #e6a23c;
}

.order-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.product-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.product-name {
  font-size: 16px;
  color: #333;
}

.product-quantity {
  color: #999;
}

.order-price {
  font-size: 18px;
  font-weight: bold;
  color: #f56c6c;
}

.order-footer {
  text-align: right;
  font-size: 12px;
  color: #999;
}
</style>